<script setup lang="ts">
import { Document, HomeFilled } from '@element-plus/icons-vue'
import { ArrowRight } from '@element-plus/icons-vue'
</script>

<template>
    <div class="head">首页</div>
    <div class="bread">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-icon>
                <HomeFilled />
            </el-icon>
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="body">
        <div class="info">
            <div id="aaa">
                <div class="l11"><el-icon>
                        <Document />
                    </el-icon></div>
                <div class="l12">待办事项</div>
            </div>
            <div class="l21">2个员工请假申请，请<a href="/index">点击这里</a>进行审批</div>
        </div>

    </div>
</template>

<style scoped>
#aaa {
    display: flex;
    height: 35px;
    margin-top: 20px;
}

.head {
    height: 30px;
    background-color: rgb(255, 255, 255);
    line-height: 30px;
    font-size: 30px;
    padding: 25px;
    color: #000;
}

.bread {
    height: 30px;
    background-color: rgb(215, 215, 215);
    padding-top: 20px;
    padding-left: 20px;
    vertical-align: bottom;
}

.body {
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.info {
    background-color: rgb(255, 255, 255);
    margin: 20px;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.l11 {
    width: 2%;
    /* background-color: red; */
    /* display: inline; */
    padding-left: 8px;
    padding-top: 8px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding-left: 10px;

}

.l12 {
    width: 98%;
    line-height: 35px;
    padding-left: 10px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;

    /* background-color: blue; */
    /* display: inline; */
}

.l21 {
    height: 100%;
    width: 100%;
    /* background-color: blueviolet; */
    padding-top: 20px;
    padding-left: 20px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

a {
    text-decoration: none;
    color: blue;
}
</style>